<template>
    <div id="seiper">
      <div class="block">
        <el-carousel height="170px">
          <el-carousel-item v-for="( item , i ) in Pictures" :key="i">
            <a :href="item.link">
                <img :src="item.image" alt="" class="picturesSize" width="100%" height="100%">
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
      <Recommend :recommends="Recommends"/>
    </div>
</template>



<script>
  import { getHomeMultidata } from "network/home"
  import Recommend from "../Recommend/Recommend"

  export default {
    name: 'Seiper',
    components:{
      Recommend
    },
    data(){
      return {
        Pictures: [],
        Recommends : []
      }
    },
    created() {
        getHomeMultidata()
         .then(res => {
            this.Pictures = res.data.data.banner.list;
            this.Recommends = res.data.data.recommend.list;
        })
    }
  }
</script>

<style>

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 190px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }

  
</style>